<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-switch/css/bootstrap-switch.min.css" />
</head>
<style>
</style>
<body style="padding-bottom: 90px; background-color: #FFF;">
	<!-- 添加电话 -->
	<div id="applyModal" >
		<div class="modal-body">
			<%-- <div class="form-group">
				<label class="control-label">小区：</label> <input type="text" class="form-control" id="communityName" value="${sessionScope.communityName}" readonly="readonly">
			</div> --%>
			<div class="form-group">
				<label class="control-label">期数：<span style="color:#F00">*</span></label> <input type="text" class="form-control" id="numberPeriods">
			</div>
			<div class="form-group">
				<label class="control-label">楼栋：<span style="color:#F00">*</span></label> <input type="text" class="form-control" id="building" onBlur="checkingBuilding()">
			</div>
			<div class="form-group">
				<label class="control-label">层数：<span style="color:#F00">*</span></label> <input type="text" class="form-control" id="layerNumber" placeholder="请填写数字">
			</div>
			<div class="form-group">
				<label class="control-label">建成时间：<span style="color:#F00">*</span></label> <input type="text" class="form-control" id="builtTime">
			</div>
			<div class="form-group">
				<label class="control-label">缴物业费时间：<span style="color:#F00">(初次)</span></label> <input type="text" class="form-control" id="s1">
			</div>
			<div class="form-group">
				<label class="control-label">单元数：</label> 
				<div class="input-group">
			      <input type="text" class="form-control" value="1" id="unitNum" placeholder="请填写数字">
			      <span class="input-group-btn">
			        <button class="btn btn-default" type="button" onclick="addUnit($('#unitNum').val())">生成单元</button>
			      </span>
			    </div>
			</div>
			<div id="danyuan" class="form-group">
					<div class="modal-header">
						<h4 class="modal-title" style="text-align: center;">1单元</h4>
						<div class="input-group">
						  <span class="input-group-addon" id="sizing-addon2">每一层房间数</span>
					      <input type="text" class="form-control" value="1" id="roomNum1">
					      <span class="input-group-btn">
					        <button class="btn btn-default" type="button" onclick="addRoom($('#roomNum1').val(),1)">生成房间表</button>
					      </span>
					    </div>
					</div>
					<div class="form-group" style="height: 8px;width: 100%;">
						<div class="col-sm-3">
						<strong style="text-align: center;display: block;">房屋编号<span style="color:#F00">*</span></strong>
						</div>
						<div class="col-sm-3">
						<strong style="text-align: center;display: block;">房型<span style="color:#F00">*</span></strong>
						</div>
						<div class="col-sm-3">
						<strong style="text-align: center;display: block;">面积(平方米)<span style="color:#F00">*</span></strong>
						</div>
						<div class="col-sm-3">
						<strong style="text-align: center;display: block;">价格(元)<span style="color:#F00">*</span></strong>
						</div>
					</div>
					<div id="field1">
						<div class="row" style="width: 100%; margin-left: 10px;"><br>
							<div class="col-sm-3"><input  type="text" class="form-control" name="doorCard" placeholder="示例 1,2,3"></div>
							<div class="col-sm-3"><input  type="text" class="form-control" name="houseType"></div>
							<div class="col-sm-3"><input  type="text" class="form-control" name="area"></div>
							<div class="col-sm-3"><input  type="text" class="form-control" name="price" onchange="this.value=toThousands(this.value)"></div>
						</div>
					</div>
			</div>
		</div>
	</div>

</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<script src="${pageContext.request.contextPath}/js/ajaxfileupload.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script src="${pageContext.request.contextPath}/plugins/laydate/laydate.js"></script>
<script src="${pageContext.request.contextPath}/js/date.js"></script>
<script>
	
	var communityId="${sessionScope.communityName}";
	var pattern = /^[0-9]*$/;//数字zhengze
	var index = parent.layer.getFrameIndex(window.name);
	var checkBuilding=false;
	
	laydate.render({ 
		  elem: '#builtTime'
		  ,type: 'date' //默认，可不填
		});
	laydate.render({ 
		  elem: '#s1'
		  ,type: 'month' //默认，可不填
		});

	function addRoom(roomNum,a){
		/* var s= document.getElementById("danyuan");
		console.log(s); */
		$("#field"+a).html('');
		if(pattern.test(roomNum)){
			for(var i=0;i<roomNum;i++){
				 var html ="<div class='row' style='width: 100%; margin-left: 10px;'><br>"
						+"<div class='col-sm-3'><input  type='text' class='form-control' name='doorCard' placeholder='示例 1,2,3'></div>"
						+"<div class='col-sm-3'><input  type='text' class='form-control' name='houseType'></div>"
						+"<div class='col-sm-3'><input  type='text' class='form-control' name='area'></div>"
						+"<div class='col-sm-3'><input  type='text' class='form-control' name='price' onchange='this.value=toThousands(this.value)'></div>"
						+"</div>";
				        $("#field"+a).append(html);
			}
		}else{
			layer.msg('请填写数字!', {
				icon : 2,
				time : 800
			});
		}
	
	}
	
	function checkingBuilding(){//判断输入的楼栋是否重复
		checkBuilding=false;
		$.ajax({
			url : "${pageContext.request.contextPath}/checkingBuilding",
			type : "post",
			traditional: true,
			data : {
				numberPeriods : $("#numberPeriods").val(),
				building : $("#building").val()
			},
			dataType : "json",
			success : function(data) {
				var result = data['result'];
				if (result === 0) {
					/* layer.msg('楼栋重复!', {
						icon : 2,
						time : 800
					}); */
					checkBuilding=true;
				}
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
			}
		});
	}
	
	
	function addUnit(unitNum){
		$("#danyuan").html('');
		if(pattern.test(unitNum)){
			for(var i=1;i<=unitNum;i++){
				var html="<br/><div class='modal-header'>"
					+"<h4 class='modal-title' style='text-align: center;'>"+i+"单元</h4>"
					+"<div class='input-group'><span class='input-group-addon' id='sizing-addon2'>每一层房间数</span>"
				    +"<input type='text' class='form-control' value='1' id='roomNum"+i+"'><span class='input-group-btn'>"
				    +"<button class='btn btn-default' type='button' onclick=addRoom($('#roomNum"+i+"').val(),"+i+")>生成房间表</button></span></div></div>"
					+"<div class='form-group' style='height: 8px;width: 100%;''><div class='col-sm-3'>"
					+"<strong style='text-align: center;display: block;'>房屋编号<span style='color:#F00'>*</span></strong></div><div class='col-sm-3'>"
					+"<strong style='text-align: center;display: block;'>房型<span style='color:#F00'>*</span></strong></div><div class='col-sm-3'>"
					+"<strong style='text-align: center;display: block;''>面积(平方米)<span style='color:#F00'>*</span></strong></div><div class='col-sm-3'>"
					+"<strong style='text-align: center;display: block;''>价格(元)<span style='color:#F00'>*</span></strong>"
					+"</div></div><div id='field"+i+"'><div class='row' style='width: 100%; margin-left: 10px;'><br>"
					+"<div class='col-sm-3'><input  type='text' class='form-control' name='doorCard' placeholder='示例 1,2,3'></div>"
					+"<div class='col-sm-3'><input  type='text' class='form-control' name='houseType'></div>"
					+"<div class='col-sm-3'><input  type='text' class='form-control' name='area'></div>"
					+"<div class='col-sm-3'><input  type='text' class='form-control' name='price' onchange='this.value=toThousands(this.value)'></div></div></div>"
					 $("#danyuan").append(html);
			}
		}else{
			layer.msg('请填写数字!', {
				icon : 2,
				time : 800
			});
		}
	}
	
	function insert() {
		//var communityName = $("#communityName").val();//小区名
		var numberPeriods = $("#numberPeriods").val();//期数
		var building = $("#building").val();//楼栋
		var layerNumber = $("#layerNumber").val();//层数
		var builtTimeStr = $("#builtTime").val();//建成时间
		var unitNum=$("#unitNum").val();//单元数
		var s1=$("#s1").val();
		var houses=new Array();
		if(checkBuilding){
			layer.alert("该期数下楼栋重复!");
			return;
		}
		if(!pattern.test(layerNumber)){
			layer.alert("层数请填写数字!");
			return;
		}
		if (numberPeriods == '' || building == '' || layerNumber == '' || builtTimeStr=='') {
			layer.alert("所有数据必填，请填写!");
			return;
		}
		
		var loading = layer.load(1, {
			  shade: [0.1,'#fff'] //0.1透明度的白色背景
			});
		for(var i=1;i<=unitNum;i++){
			var doorCard='';
			var houseType='';
			var area='';
			var price='';
			var house='';
			var a=$("#roomNum"+i).val();
			for(var j=0;j<a;j++){
				house+=($("#field"+i+" [name='doorCard']")[j].value+ '-'+$("#field"+i+" [name='houseType']")[j].value+ '-'+$("#field"+i+" [name='area']")[j].value+ '-'+$("#field"+i+" [name='price']")[j].value)+"*";
			}
			houses[i-1]=house.substring(0, house.length - 1);
		}
		
		$.ajax({
			url : "${pageContext.request.contextPath}/insertHouseProperty",
			type : "post",
			traditional: true,
			data : {
				numberPeriods : numberPeriods,
				building : building,
				layerNumber : layerNumber,
				builtTimeStr :builtTimeStr,
				houses : houses,
				unitNum : unitNum,
				s1:s1
			},
			dataType : "json",
			success : function(data) {
				var result = data['result'];
				if (result === 1) {
					layer.close(loading);
					layer.msg('操作成功!', {
						icon : 1,
						time : 800
					});
					setTimeout(function() {
						parent.querry();
						parent.layer.close(index);
					}, 1000); 
				} else {
					layer.msg('操作失败!', {
						icon : 2,
						time : 800
					});
					layer.close(loading);
				}
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
			}
		});
	}
	
	 function toThousands(number){
	     var decimals=2;//要格式化的数字
	     var dec_point='.';//保留几位小数
	     var thousands_sep=',';//千分位符号
		 number = (number + '').replace(/[^0-9+-Ee.]/g, '');
		 var n = !isFinite(+number) ? 0 : +number,
		 prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
		 sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
		 dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
		 s = '',
         toFixedFix = function (n, prec) {
              var k = Math.pow(10, prec);
              return '' + Math.floor(n * k) / k;
         };
         s = (prec ? toFixedFix(n, prec) : '' + Math.floor(n)).split('.');
         var re = /(-?\d+)(\d{3})/;
         while (re.test(s[0])) {
             s[0] = s[0].replace(re, "$1" + sep + "$2");
         }
	
	    if ((s[1] || '').length < prec) {
	         s[1] = s[1] || '';
		     s[1] += new Array(prec - s[1].length + 1).join('0');
		}
		 return s.join(dec);
    }
	
</script>
</html>
